import React from 'react';
import { Balloon } from '@teamix/ui';
import { YunxiaoTable } from '@alife/devops-ui';
import Pagination from 'components/commonPagination';
import utils from 'utils';
import Filter from './filter';
import exceed from 'utils/apimap';
import ListEmpty from 'atComponents/ListEmpty';
import intl from '../../../../../../../../../../locale';

export default class Record extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoadingList: true,
      list: [],
      page: 1,
      total: 0,
      per_page: 10,
      sort: 'desc',
      begin_date: '',
      end_date: '',
      author_ids: '',
    };
  }

  componentDidMount() {
    this.getLfsList(1);
  }

  getLfsList = (page) => {
    this.setState({
      isLoadingList: true,
    });

    const { per_page, sort, begin_date, end_date, author_ids } = this.state;
    const data = {
      page,
      per_page,
      sort,
      begin_date,
      end_date,
      deleted_by: author_ids,
    };

    const { pathResource } = window.FORCE;
    exceed
      .fetch({
        api: 'project.lfs.list.deleted_file',
        params: {
          projectId: pathResource.id,
        },

        data,
      })
      .then((result) => {
        const list = result.slice(1);
        this.setState({
          list,
          total: result[0].amount,
          page,
          isLoadingList: false,
        });
      })
      .fail(() => {
        this.setState({
          isLoadingList: false,
        });
      });
  };

  renderOid = (value) => {
    return (
      <Balloon.Tooltip
        trigger={<div className="table-cell-one-line">{value}</div>}
        closable={false}
        align="t"
      >
        {value}
      </Balloon.Tooltip>
    );
  };

  renderAuthor = (value) => {
    const { avatar, name } = value || {};
    return (
      <Balloon.Tooltip
        trigger={
          <div className={'author-info table-cell-one-line'}>
            <img src={avatar} />
            {name}
          </div>
        }
        align="t"
        text={name}
      />
    );
  };

  renderSize = (value) => {
    return utils.getSizeStr(value);
  };

  renderTime = (value) => {
    return utils.getBeautyTime(value);
  };

  updateRecordParams = (tableParams) => {
    this.setState(
      {
        ...tableParams,
      },

      () => {
        this.getLfsList(1);
      },
    );
  };

  render() {
    const { isLoadingList, list, page, total, begin_date, end_date, author_id, users } = this.state;

    return (
      <div className="lfs-table-container delete-record">
        <div className="lfs-table-filter">
          <Filter
            tableParams={{
              begin_date,
              end_date,
              author_id,
            }}
            updateRecordParams={this.updateRecordParams}
            users={users}
          />
        </div>
        <div className="lfs-table-detail">
          <YunxiaoTable
            primaryKey="id"
            className={'no-border-table'}
            hasBorder={false}
            dataSource={list}
            loading={isLoadingList}
            emptyContent={
              <ListEmpty
                content={intl.get({
                  id: 'code-assets.containers.deleteRecord.NoData',
                  defaultMessage: '暂无数据',
                })}
                imgType="none"
                className="table-list-empty"
                size="small"
              />
            }
          >
            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.containers.deleteRecord.FileOid',
                defaultMessage: '文件 OID',
              })}
              dataIndex="oid"
              width={150}
              cell={this.renderOid}
            />

            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.containers.deleteRecord.FileType',
                defaultMessage: '文件类型',
              })}
              width={100}
              dataIndex="file_suffix"
            />
            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.containers.deleteRecord.FileSize',
                defaultMessage: '文件大小',
              })}
              dataIndex="file_size"
              width={100}
              cell={this.renderSize}
            />

            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.containers.deleteRecord.Operator',
                defaultMessage: '操作人',
              })}
              width={140}
              dataIndex="deleted_by"
              cell={this.renderAuthor}
            />

            <YunxiaoTable.Column
              title={intl.get({
                id: 'code-assets.containers.deleteRecord.OperationTime',
                defaultMessage: '操作时间',
              })}
              dataIndex="delete_time"
              width={170}
              cell={this.renderTime}
            />
          </YunxiaoTable>
          <Pagination
            onChange={this.getLfsList}
            current={page}
            total={total}
            showJump={false}
            hideOnlyOnePage
          />
        </div>
      </div>
    );
  }
}
